<template>
	<div>
		<div id="mychart3" style="height: 380px; width: 100%;"></div>
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')
import { mainfun } from '../../../../../assets/js/main.js'
export default {
	data() {
		return {
			url: common.url,
			str1: [], //日期
			str2: [], //累计店铺数
			str3: [], //下单店铺数
			str4: [] //新增店铺数
		}
	},
	props: ['dayThree'],
	watch: {
		dayThree(newName, oldName) {
			this.dayThree = newName
			this.getdata()
		}
	},
	created() {
		//数据请求
		this.getdata()
	},
	methods: {
		getdata() {
			// 先重置数据
			this.str1 = []
			this.str2 = []
			this.str3 = []
			this.str4 = []
			let fn = new FormData()
			// fn.append('day', this.dayThree) //近n天的数据
			this.$http.post(this.url + '/index/expressHistoryMonth', fn).then(
				res => {
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						var echars_date = res.data.data
						echars_date.forEach(element => {
							this.str1.push(element.date)
							// this.str2.push(element.shop_sum)
							this.str3.push((element.hour_actual_finish / 3600).toFixed(2))
							// this.str4.push(element.shop_new)
						})
						this.init() //初始化
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		init() {
			let mychart3 = this.$echarts.init(document.getElementById('mychart3'))

			var that = this

			mychart3.setOption({
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				title: {
					text: '',
					subtext: ''
				},
				tooltip: {
					trigger: 'axis'
				},
				// legend: {
				// 	data: ['累计店铺数', '下单店铺数', '新增店铺数'],
				// 	bottom: 0
				// },
				calculable: true,
				xAxis: [
					{
						type: 'category',
						data: that.str1
					}
				],
				yAxis: [
					{
						type: 'value',
						// scale: true,
						axisLabel: {
							formatter: '{value}'
							// formatter: ''
						}
					}
				],
				series: [
					// {
					// 	name: '累计店铺数',
					// 	type: 'bar',
					// 	data: that.str2,
					// 	color: '#699bd0',
					// 	label: {
					// 		show: true,
					// 		position: 'top'
					// 	}
					// },
					{
						name: '月度时长',
						type: 'bar',
						data: that.str3,
						color: '#df8244',
						label: {
							show: false
						}
					}
					// {
					// 	name: '新增店铺数',
					// 	type: 'bar',
					// 	data: that.str4,
					// 	color: '#4fad5b',
					// 	label: {
					// 		show: true,
					// 		position: 'top'
					// 	}
					// }
				]
			})
		}
	}
}
</script>

<style scoped></style>



// WEBPACK FOOTER //
// src/components/components/echarts/Three.vue